<template>
  <!-- 折线图容器 -->
  <div style="width:50%;border:1px solid #e2e2e2;">
    <div>
    <div class="main">
      <span class="span-title">热门搜索</span>
      <svg t="1637478175000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2179" width="26" height="26">
        <path
          d="M536 480v192a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V480a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z m-32-128h16a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z m8 448c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z"
          p-id="2180" fill="#8a8a8a"></path>
      </svg>
    </div>
    <div class="main">
      <span style=" font-size: 18px;font-weight: bold;margin-right: 50px;">12321</span>
      <span class="span-title">17.1
        <svg t="1637478902688" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3315" width="16" height="16">
          <path
            d="M786.295467 485.000533l-6.126934 2.082134v-18.295467h6.024534l0.1024 16.213333zM221.5424 485.239467h-8.9088l-0.085333-16.247467 8.994133-0.512v16.759467z"
            fill="#1afa29" p-id="3316" />
          <path
            d="M784.469333 480.290133L504.456533 178.978133a6.826667 6.826667 0 0 0-10.001066 0L214.459733 480.290133a6.826667 6.826667 0 0 0 5.922134 11.4176l158.1056-21.435733L358.4 853.333333v16.162134a6.826667 6.826667 0 0 0 6.826667 7.168h268.356266a6.826667 6.826667 0 0 0 6.826667-7.168l-0.119467-16.3328-19.848533-382.8736 158.122667 21.418666a6.826667 6.826667 0 0 0 5.922133-11.4176z"
            fill="#1afa29" p-id="3317" />
          <path
            d="M191.3344 734.6176l103.031467 72.789333 103.048533-72.789333a127.197867 127.197867 0 0 0-206.097067 0z"
            fill="#1afa29" p-id="3318" />
          <path
            d="M294.382933 681.984a127.010133 127.010133 0 0 1 103.048534 52.6336l-103.048534 72.789333-103.031466-72.789333a127.010133 127.010133 0 0 1 103.048533-52.6336m0-10.24a137.915733 137.915733 0 0 0-111.342933 56.849067 10.24 10.24 0 0 0 2.269866 14.2848l0.136534 0.1024L288.426667 815.786667a10.24 10.24 0 0 0 11.810133 0l103.031467-72.772267a10.24 10.24 0 0 0 2.4064-14.3872 137.915733 137.915733 0 0 0-111.342934-56.849067z"
            fill="#1afa29" p-id="3319" />
          <path d="M384.1536 444.142933h1.5872l-20.48 409.6h268.2368l-20.48-409.6" fill="#1afa29" p-id="3320" />
          <path
            d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l20.48-409.6 5.239467 0.256v-6.826667h1.5872a6.826667 6.826667 0 0 1 6.826666 7.168l-20.1216 402.432H626.346667l-20.1216-402.432 13.653333-0.682666 20.48 409.6a6.826667 6.826667 0 0 1-6.826667 7.168z"
            fill="#1afa29" p-id="3321" />
          <path
            d="M613.0176 446.276267l166.365867 22.545066L499.387733 167.509333 219.374933 468.821333l164.778667-22.545066"
            fill="#1afa29" p-id="3322" />
          <path
            d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l19.968-399.240533-158.122667 21.435733a6.826667 6.826667 0 0 1-5.922133-11.4176L494.370133 162.8672a6.826667 6.826667 0 0 1 10.001067 0L784.384 464.213333a6.826667 6.826667 0 0 1-5.922133 11.4176l-158.122667-21.418666L640.3072 853.333333a6.826667 6.826667 0 0 1-6.826667 7.168z m-261.12-13.653333H626.346667L606.3104 446.634667a6.826667 6.826667 0 0 1 7.7312-7.099734l147.3536 19.950934L499.370667 177.493333 237.3632 459.485867l147.3536-19.968a6.826667 6.826667 0 0 1 7.7312 7.099733z"
            fill="#1afa29" p-id="3323" />
          <path d="M557.3632 617.5744l149.5552 105.659733 149.572267-105.659733a184.644267 184.644267 0 0 0-299.1616 0z"
            fill="#1afa29" p-id="3324" />
          <path
            d="M706.935467 541.184a184.32 184.32 0 0 1 149.572266 76.3904l-149.572266 105.659733-149.5552-105.659733a184.32 184.32 0 0 1 149.572266-76.3904m0-10.24a194.56 194.56 0 0 0-157.866666 80.622933 10.24 10.24 0 0 0 2.184533 14.2336l0.221867 0.1536 149.5552 105.659734a10.24 10.24 0 0 0 11.810133 0l149.5552-105.642667a10.24 10.24 0 0 0 2.4064-14.3872 194.56 194.56 0 0 0-157.866667-80.622933z"
            fill="#1afa29" p-id="3325" />
        </svg></span>
    </div></div>
    <div class="echart" ref="mychart1" id="mychart1" :style="{
      width: '100%',
      height: '200px',
      marginBottom: '15px',
      border: '1px solid #efefef',
      borderRadius: '5px',
    }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LineIndex',
  data() {
    return {
      mycharts: [],
    }
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let mychart1 = echarts.init(this.$refs.mychart1);
      let option1 = {
        // title: {
        //   text: "访问量",
        //   left: "center",
        // },
        tooltip: {
          show: true,
          trigger: "axis", // 触发类型
          axisPointer: {
            type: "cross", // 坐标轴指示器类型，直线指示器
            crossStyle: {
              color: "#999"
            }
          }
        },
        // legend: {
        //   orient: "vertical", //垂直显示
        //   left: "left",
        //   data: ["销售额", "访问量", "订单量"],
        // },
        // toolbox: {
        //   // feature: {
        //   //   saveAsImage: {},
        //   // },
        // },
        xAxis: {
          type: 'category',
          boundaryGap: true, // 坐标轴两边留白策略
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          },
        yAxis: {
          show: false
        },
        series: [
          {
            name: '热门搜索数',
            type: 'line',
            data: [108, 87, 93, 120, 88, 144,118,120,95,110,85,115],
            // 拐点的样式的设置
            itemStyle: {
              opacity: 0
            },
            // 线条的样式
            lineStyle: {
              color: 'skyblue'
            },
            // 填充颜色设置
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'skyblue' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ],
        grid: {
          left: 5,
          top: 5,
          right: 15,
          bottom: 20,
        },
      };
      mychart1.setOption(option1);
      // this.mycharts.push(mychart1);
      // 随窗口大小改变自适应
      window.onresize = () => {
        mychart1.resize();
      };
    }

  }

}
</script>

<style scoped>
.span-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0px 10px 3px 3px;
}

.main {
  display: flex;
  font-size: 18px;
  margin: 20px;
}
</style>